<template>
  <div class="container">
    <van-nav-bar title="录播课程" :border="false">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#565656" @click="goBack" />
      </template>
      <template #right>
        <van-popover
          ref="popover"
          v-model="showPopover"
          trigger="click"
          placement="bottom-end"
          overlay
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <div class="sift">
              <span>筛选&nbsp;</span>
              <van-icon :name="require('@/assets/images/sift.png')" size="24"/>
            </div>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" class="vod-tab" @click="tabClick" line-width="0">
      <van-tab title="全部"></van-tab>
      <van-tab title="免费"></van-tab>
    </van-tabs>
    <div class="gray"></div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已经到底了"
      @load="onLoad"
    >
      <VodCourse :courses="showCourses"></VodCourse>
    </van-list>
  </div>
</template>

<script>
import NavBar from '@/components/common/Navbar';
import VodCourse from '@/components/content/VodCourse';
import { getVodCourses, getCategoryCourse } from '@/network/vod';

export default {
  components: {
    NavBar,
    VodCourse,
  },
  data() {
    return {
      loading: false,
      finished: false,
      currentType: 'all',
      active: 0,
      categoryID: 0,
      showPopover: false,
      actions: [{ id: 0, text: '全部' }],
      courses: {
        all: { page: 1, list: [] },
        free: { page: 1, list: [] },
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onSelect({ id }) {
      if (this.categoryID == id) return;
      this.courses[this.currentType].list = [];
      this.courses[this.currentType].page = 1;
      this.categoryID = id;
      this.loading = true;
      this.finished = false;
      this.onLoad();
    },
    tabClick(index) {
      const types = ['all', 'free'];
      if (this.currentType == types[index]) return;
      this.courses[this.currentType].list = [];
      this.courses[this.currentType].page = 1;
      this.currentType = types[index];
      this.loading = true;
      this.finished = false;
      this.onLoad();
    },
    onLoad() {
      getVodCourses(this.currentType, this.courses[this.currentType].page, this.categoryID).then((res) => {
        this.courses[this.currentType].list.push(...res.data.data);
        this.loading = false;
        this.courses[this.currentType].page += 1;
        if (this.courses[this.currentType].page > res.data.last_page) {
          this.finished = true;
        }
      });
    },
  },
  computed: {
    showCourses() {
      return this.courses[this.currentType].list;
    },
  },
  created() {
    getCategoryCourse().then((res) => {
      for (const i in res.data) {
        this.actions.push({ id: res.data[i].id, text: res.data[i].name });
      }
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  .sift {
    display: flex;
  }
  .gray {
    height: 8px;
    background-color: #f6f6f6;
  }
  .vod-tab {
    display: flex;
    padding: 0 12px;
  }
  .active {
    color: #3ca7fa;
    font-weight: 700;
  }
}
</style>
